<template>
	<view>
		<view class="my-userinfo-container">
			<!-- 头像昵称区域 -->
			<view class="top-box">
				<view class="avatar">
					<image class="avatar-img" v-if="!isUserInfo" :src="userInfo.headImg"></image>
				</view>
				<view class="name-tel" v-if="!isUserInfo" @click="toEditProfile">
					<view class="nickname">
						{{userInfo.nickname}}
					</view>
					<view class="tel">
						{{userInfo.phone}}
					</view>
				</view>

				<view class="arr-r" v-if="!isUserInfo" @click="toEditProfile">
					<image class="right-arr" src="/static/icons/my_data_rightarrow@3x.png"></image>
				</view>
				<view class="login-link" @click="tologin" v-if="isUserInfo">
					登录/注册
				</view>
			</view>
			<!-- 成为合伙人 -->
			<view class="to-partner" @click="toBePartner">
				<view class="top">
					<view>
						<view class="level">
							合伙人等级：<text class="lev">{{currentLevel.name}}</text>
						</view>
						<view class="xjfx">
							尊享现金返现权益
						</view>
					</view>
					<view class="check-my">
						查看我的
					</view>
				</view>
				<view class="line">
				</view>
				<view class="to-be">
					<image src="/static/icons/my_close_icon@3x.png" class="pt"></image> 我要成为合伙人 <text
						class="txt">点击成为合伙人</text>
					<image src="/static/icons/my_close_icon_rightarrow@3x.png" class="arrow-right"></image>
				</view>

			</view>


			<!-- 我的账户 -->
			<view class="my-count" v-if="!isUserInfo">
				<view class="title">
					我的账户
				</view>
				<view class="line_count">
				</view>

				<view class="count">
					<view class="num" @click="checkAccountBalance(userInfo.balance)">
						￥{{userInfo.balance}}
						<view class="cate">
							余额
						</view>
						<view class="br">
						</view>
					</view>
					<view class="num" @click="checkBalance(userInfo.hb)" >
						￥{{userInfo.hb?formatDecimal(userInfo.hb,2):formatDecimal(userInfo.hb,2)}}
						<view class="cate">
							红包
						</view>
						<view class="br">
						</view>
					</view>
					<view class="num" @click="checkExpense">
						￥{{userInfo.totalConsume}}
						<view class="cate">
							消费记录
						</view>
					</view>
				</view>

			</view>

			<!-- 面板的列表区域 -->
			<view class="panel-list">
				<view class="panel">
					<view class="panel-title"><text class="order">我的订单</text> <text class="see-all"
							@click="checkAllOrder">查看全部 </text>
						<image class="a-r" src="/static/icons/my_data_rightarrow@3x.png"></image>
					</view>

					<view class="line">
					</view>

					<view class="panel-body">
						<view class="panel-item" @click="toCheckObligation">
							<image src="/static/icons/my_order_payment@3x.png" class="icon"></image>
							<text>待付款</text>
						</view>
						<view class="panel-item" @click="toCheckWaitdeliver">
							<image src="/static/icons/my_order_hair@3x.png" class="icon"></image>
							<text>待发货</text>
						</view>
						<view class="panel-item" @click="toCheckWaitReceiving">
							<image src="/static/icons/my_order_collect@3x.png" class="icon"></image>
							<text>待收货</text>
						</view>
						<view class="panel-item" @click="toCheckDone">
							<image src="/static/icons/my_order_complete@3x.png" class="icon"></image>
							<text>已完成</text>
						</view>
						<view class="panel-item" @click="toCheckRefund">
							<image src="/static/icons/my_order_refund@3x.png" class="icon"></image>
							<text>退款中</text>
						</view>
					</view>
				</view>

				<view class="my-about">
					<view class="about-item" @click="toMyTeam()">
						<image src="/static/icons/my_function_team@3x.png" mode="aspectFit" class="icon-about"></image>
						<text>我的团队</text>
					</view>
					<view class="about-item" @click="toMyAddress()">
						<image src="/static/icons/my_function_address@3x.png" mode="aspectFit" class="icon-about">
						</image>
						<text>我的地址</text>
					</view>
					<view class="about-item" @click="toSendAddress">
						<image src="/static/icons/send_info.png" mode="aspectFit" class="icon-about">
						</image>
						<text>发货信息</text>
					</view>
					<view class="about-item" @click="toMyFootMark">
						<image src="/static/icons/my_function_record@3x.png" mode="aspectFit" class="icon-about">
						</image>
						<text>浏览记录</text>
					</view>
					<view class="about-item about" @click="toMyCollection">
						<image src="/static/icons/my_function_collection@3x.png" mode="aspectFit" class="icon-about">
						</image>
						<text>我的收藏</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 导入 mixin 模块
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				user: {},
				isReLaunch: '', // 是否允许回退
				redirect: '', // 登陆后重定向
				isUserInfo: false,
				levelList: [],
				currentLevel: {},
				levelGap: 0,
				session_key: ''

			}
		},
		onShow() {
			// this.user=JSON.parse(uni.getStorageSync('user'))
			this.isUserInfo = JSON.stringify(this.userInfo) == '{}'
			// this.updateUserData()
			// 更新个人信息数据
			this.updateUserData()

		},
		onLoad(option) {
			this.redirect = uni.getStorageSync('redirect')
			this.updateUserData()
			this.getLevelList()
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			
			// 保留两位小数,不四舍五入
			formatDecimal(num, decimal) {
				num = num.toString()
				let index = num.indexOf('.')
				if (index !== -1) {
					num = num.substring(0, decimal + index + 1)
				} else {
					num = num.substring(0)
				}
				return parseFloat(num).toFixed(decimal)
			},


			// 查看消费记录
			checkExpense() {
				// 登录了
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/expense-calendar/expense-calendar'
					})
				} else {
					uni.$showMsg('请先登录！')
				}
			},


			// 获取所有等级信息
			async getLevelList() {
				const {
					data: res
				} = await uni.$http.post('/level/list')
				console.log(res.data)
				this.levelList = res.data.reverse()
				let i = this.levelList.findIndex(item => {
					return item.integral > this.userInfo.totalConsume
				})
				console.log(i, this.levelList[i - 1])
				// 当前等级
				if (i > -1) {
					this.currentLevel = this.levelList[i - 1]
					// 下一等级的金额减当前的经验
					this.levelGap = this.levelList[i].integral - this.userInfo.totalConsume
				} else {
					this.currentLevel = this.levelList[this.levelList.length - 1]
				}
				if (JSON.stringify(this.userInfo) == '{}') {
					this.currentLevel = this.levelList[0]
				}

			},

			// 获取用户信息
			async updateUserData() {
				console.log(11)
				if (uni.getStorageSync('openId')) {
					const {
						data: res
					} = await uni.$http.post('/user/getUserData', {
						openid: uni.getStorageSync('openId'),
						phone: uni.getStorageSync('phone'),
						nickname: this.userInfo.nickname,
						headImg: this.userInfo.headImg,
						recPhone: ''
					})
					console.log(res, 55)
					this.updateUserInfo(res.data)
				}
				this.getLevelList()
			},


			// 查看待付款订单
			toCheckObligation() {
				// let redirect = '/subpkg/order-list/order-list';
				// uni.setStorageSync('redirect', redirect)

				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/order-list/order-list'
					})
					uni.setStorageSync('state', '1')
					uni.setStorageSync('btnNum', '1')
				} else {
					uni.$showMsg('请先登录!')
				}

			},
			// 查看待发货订单
			toCheckWaitdeliver() {
				// let redirect = '/subpkg/order-list/order-list';
				// uni.setStorageSync('redirect', redirect)
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/order-list/order-list'
					})
					uni.setStorageSync('state', '2')
					uni.setStorageSync('btnNum', '2')
				} else {
					uni.$showMsg('请先登录!')
				}

			},
			// 查看待收货订单
			toCheckWaitReceiving() {
				// let redirect = '/subpkg/order-list/order-list';
				// uni.setStorageSync('redirect', redirect)
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/order-list/order-list'
					})
					uni.setStorageSync('state', '3')
					uni.setStorageSync('btnNum', '3')
				} else {
					uni.$showMsg('请先登录!')
				}
			},
			// 查看已完成订单
			toCheckDone() {

				// let redirect = '/subpkg/order-list/order-list';
				// uni.setStorageSync('redirect', redirect)
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/order-list/order-list'
					})
					uni.setStorageSync('state', '4')
					uni.setStorageSync('btnNum', '4')
				} else {
					uni.$showMsg('请先登录!')
				}
			},
			// 查看退款中订单
			toCheckRefund() {
				// let redirect = '/subpkg/order-list/order-list';
				// uni.setStorageSync('redirect', redirect)
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/order-list/order-list'
					})
					uni.setStorageSync('state', '5')
					uni.setStorageSync('btnNum', '5')
				} else {
					uni.$showMsg('请先登录!')
				}
			},

			// 获取opeind
			// async getOpenId(code) {
			// 	const {
			// 		data: res
			// 	} = await uni.$http.post('/user/getModelByCode', {
			// 		code: code
			// 	})
			// 	console.log(res)
			// 	this.openId = res.data.openid
			// 	uni.setStorageSync('openId', res.data.openid)
			// 	this.session_key = res.data.session_key
			// },

			async tologin() {
				// var that = this
				// uni.login({
				// 	provider: 'weixin',
				// 	success: res => {
				// 		var that = this
				// 		that.getOpenId(res.code)
				// 		uni.setStorageSync('setcode',res.code)
				// 	}
				// })

				// // desc 为必填字段，用于声明获取用户个人信息后的用途，不超过30个字符
				// const [err, res] = await uni.getUserProfile({
				// 	desc: '获取用户信息'
				// }).catch(err => err)
				// if (err !== null && err.errMsg === "getUserProfile:fail auth deny") return uni.$showMsg('您取消了微信授权！')
				// uni.setStorageSync('user', JSON.stringify(res.userInfo))
				// // let redirect = '/pages/my/my';
				// uni.navigateTo({
				// 	url: '/subpkg/login/login?openId=' + this.openId + '&session_key=' + this.session_key
				// })

				uni.navigateTo({
					url: '/subpkg/login/login'
				})
				// uni.setStorageSync('redirect', redirect)
			},
			// 成为合伙人
			toBePartner() {
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/partner/partner'
					})
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/pages/my/my';
					uni.setStorageSync('redirect', redirect)
				}
			},
			// 查看我的团队
			toMyTeam() {
				// console.log(this.userInfo)
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/my-team/my-team'
					})
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/pages/my/my';
					uni.setStorageSync('redirect', redirect)
				}
			},
			// 查看账户余额
			checkAccountBalance(num) {
				uni.navigateTo({
					url: '/subpkg/account-banlnce/account-banlnce?num=' + num
				})
			},
			// 查看红包余额
			checkBalance(num) {
				uni.navigateTo({
					url: '/subpkg/check-balance/check-balance?num=' + num
				})
			},
			// 查看发货地址
			toSendAddress() {
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/send-address/send-address'
					})
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/subpkg/send-address/send-address';
					uni.setStorageSync('redirect', redirect)
				}
			},
			// 查看我的收货地址
			toMyAddress(info) {
				// console.log(info._id)
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/select-address/select-address?id=' + this.userInfo._id
					})
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/subpkg/select-address/select-address';
					uni.setStorageSync('redirect', redirect)
				}
			},
			// 查看浏览记录
			toMyFootMark() {
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/my-footmark/my-footmark'
					})
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/subpkg/my-footmark/my-footmark';
					uni.setStorageSync('redirect', redirect)
				}
			},
			// 查看个人收藏
			toMyCollection() {
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/my-collection/my-collection?id=' + this.userInfo._id
					})
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/subpkg/my-collection/my-collection';
					uni.setStorageSync('redirect', redirect)
				}
			},
			// 查看订单
			checkAllOrder() {
				if (!this.isUserInfo) {
					uni.navigateTo({
						url: '/subpkg/order-list/order-list'
					})
					uni.setStorageSync('btnNum', '0')
					uni.setStorageSync('state', '')
				} else {
					uni.$showMsg('请先登录!')
					let redirect = '/pages/my/my';
					uni.setStorageSync('redirect', redirect)
				}
			},


			toEditProfile() {
				uni.navigateTo({
					url: '/subpkg/user-profile/user-profile'
				})
			},

		},
		computed: {
			...mapState('m_user', ['userInfo'])
		},
	}
</script>

<style lang="scss">
	.my-userinfo-container {
		height: 100%;

		.top-box {
			height: 180rpx;
			display: flex;
			align-items: center;

			.login-link {
				line-height: 60rpx;
				height: 60rpx;
				width: 180rpx;
				text-align: center;
				background-color: #F0AD4E;
				border-radius: 30rpx;
				color: #fff;

			}

			.avatar {
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				border: 2px solid #eee;
				margin-left: 24rpx;
				margin-right: 20rpx;

				.avatar-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.name-tel {
				display: flex;
				flex-direction: column;

				.nickname {
					color: #343434;
					font-weight: bold;
					font-size: 34rpx;
					font-weight: 500;
					// margin-top: 54rpx;
				}

				.tel {
					font-size: 26rpx;
					font-weight: 400;
					color: #343434;
					margin-top: 10rpx;
				}
			}

			.arr-r {
				width: 30rpx;
				height: 54rpx;
				// margin-top: 60rpx;
				margin-left: 350rpx;

				.right-arr {
					height: 27rpx;
					width: 15rpx;
					margin: auto;
				}
			}
		}

		// 合伙人
		.to-partner {
			width: 702rpx;
			height: 186rpx;
			border-radius: 12rpx;
			background: linear-gradient(15deg, #EBC782 0%, #F5D28E 99%);
			margin: auto;
			margin-bottom: 25rpx;
			padding-left: 24rpx;
			padding-top: 30rpx;
			box-sizing: border-box;

			.top {
				display: flex;
				position: relative;
			}

			.level {
				font-size: 28rpx;
				font-weight: bold;
				color: #B46C0F;

				.lev {
					font-size: 26rpx;
				}
			}

			.xjfx {
				font-size: 20rpx;
				font-weight: 300;
				color: #B46C0F;
			}
		}

		.check-my {
			position: absolute;
			right: 30rpx;
			width: 126rpx;
			height: 45rpx;
			line-height: 45rpx;
			text-align: center;
			background: #D80E0E;
			border-radius: 23rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.line {
			width: 646rpx;
			height: 1rpx;
			background-color: #5F3908;
			opacity: 0.2;
			margin-top: 25rpx;
		}

		.to-be {
			height: 65rpx;
			line-height: 65rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #B46C0F;

			.pt {
				width: 36rpx;
				height: 32rpx;
				margin-right: 10rpx;
				vertical-align: middle;
			}

			.txt {
				font-size: 24rpx;
				margin-left: 230rpx;
			}

			.arrow-right {
				width: 11rpx;
				height: 19rpx;
				font-size: 26rpx;
				font-weight: 500;
				color: #B46C0F;
				margin-left: 15rpx;
				vertical-align: middle;
			}
		}

		.my-count {
			width: 702rpx;
			height: 251rpx;
			// background: #3E3F4B;
			border-radius: 12rpx;
			margin: auto;
			margin-bottom: 25rpx;
			background: url('/static/icons/1.png');
			background-size: contain;

			.title {
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				height: 90rpx;
				line-height: 90rpx;
				padding-left: 27rpx;
				box-sizing: border-box;
			}

			.line_count {
				width: 646rpx;
				height: 1rpx;
				background-color: #ECECEC;
				opacity: 0.2;
				margin: auto;
			}

			.count {
				font-size: 34rpx;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;
				align-items: center;
				height: 160rpx;

				.num {
					flex: 1;
					text-align: center;
					// border-right: 1rpx solid #b0b0b5;
					position: relative;

					.br {
						position: absolute;
						right: 0;
						top: 20rpx;
						width: 1rpx;
						height: 56rpx;
						background-color: #FFFFFF;
						opacity: 0.63;
					}

					// &:last-child {
					// 	border-right: none;
					// }


					.cate {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
				}
			}
		}

		.panel-list {
			.panel {
				background-color: white;
				width: 702rpx;
				height: 251rpx;
				border-radius: 12rpx;
				margin-top: 25rpx;
				margin: auto;
				box-shadow: 0px -2px 8px 1px rgba(0, 0, 0, 0.03);
				position: relative;

				.a-r {
					position: absolute;
					width: 11rpx;
					height: 20rpx;
					right: 8rpx;
					top: 30rpx;
				}

				.line {
					width: 646rpx;
					height: 1rpx;
					background-color: 1rpx solid #eee;
					border-radius: 12rpx;
					margin: auto;
					margin-bottom: 32rpx;
				}

				.panel-title {
					height: 82rpx;
					line-height: 82rpx;
					padding: 0 10rpx;
					font-size: 15px;
					display: flex;
					justify-content: space-between;
					padding: 0 27rpx;

					.order {
						font-size: 32rpx;
						font-weight: 500;
						color: #333333;
					}

					.see-all {
						font-size: 24rpx;
						font-weight: 500;
						color: #999999;
					}
				}

				.panel-body {
					display: flex;
					justify-content: space-around;

					.panel-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-around;
						font-size: 26rpx;
						font-weight: 400;
						color: #111111;

						.icon {
							width: 46rpx;
							height: 46rpx;
							margin-bottom: 25rpx;
						}
					}
				}
			}
		}

	}


	.my-about {
		width: 702rpx;
		height: 441rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		box-shadow: 0px -2rpx 8rpx 1rpx rgba(0, 0, 0, 0.03);
		margin: auto;
		margin-top: 24rpx;
		margin-bottom: 77rpx;
		// padding: 0 47rpx;
		box-sizing: border-box;
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		// margin-right: 40rpx;
		// margin-left: 47rpx;
		font-size: 24rpx;
		position: relative;

		//   ::after{
		// 	 content: "";
		// 	 height: 0;
		// 	 // width: 32%;
		// }
		.about-item {
			display: flex;
			width: 33%;
			flex-direction: column;
			align-items: center;

			// justify-content: space-around;
			// &.about {
			// 	position: absolute;
			// 	left: 50%;
			// 	bottom: 58rpx;
			// 	transform: translateX(-50%);
			// }
		}

		.icon-about {
			height: 56rpx;
			width: 50rpx;
			margin-top: 50rpx;
			margin-bottom: 25rpx;
		}
	}
</style>
